<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>{popup}</title>
<meta name="generator" content="DocBook XSL Stylesheets V1.75.1">
<link rel="home" href="index.html" title="Smarty マニュアル">
<link rel="up" href="language.custom.functions.html" title="Chapter 8. カスタム関数">
<link rel="prev" href="language.function.math.html" title="{math}">
<link rel="next" href="language.function.popup.init.html" title="{popup_init}">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<div class="navheader">
<table width="100%" summary="Navigation header">
<tr><th colspan="3" align="center">{popup}</th></tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="language.function.math.html">Prev</a> </td>
<th width="60%" align="center">Chapter 8. カスタム関数</th>
<td width="20%" align="right"> <a accesskey="n" href="language.function.popup.init.html">Next</a>
</td>
</tr>
</table>
<hr>
</div>
<div class="sect1" title="{popup}">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="language.function.popup"></a>{popup}</h2></div></div></div>
<p>
   <code class="varname">{popup}</code> を使用して、Javascript のポップアップウィンドウを作成します。
   <a class="link" href="language.function.popup.init.html" title="{popup_init}">
   <code class="varname">{popup_init}</code></a> は、この動作の最初に呼び出される必要があります。
 </p>
<div class="informaltable"><table border="1">
<colgroup>
<col align="center">
<col align="center">
<col align="center">
<col align="center">
<col>
</colgroup>
<thead><tr>
<th align="center">属性名</th>
<th align="center">型</th>
<th align="center">必須</th>
<th align="center">デフォルト</th>
<th>概要</th>
</tr></thead>
<tbody>
<tr>
<td align="center">text</td>
<td align="center">string</td>
<td align="center">Yes</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップウィンドウ中に表示するtext/html</td>
</tr>
<tr>
<td align="center">trigger</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>onMouseOver</em></span></td>
<td>ポップアップウィンドウを起動するトリガー（onMouseOver又はonClick）</td>
</tr>
<tr>
<td align="center">sticky</td>
<td align="center">boolean</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em><code class="constant">FALSE</code></em></span></td>
<td>閉じられるまでポップアップを待機させる</td>
</tr>
<tr>
<td align="center">caption</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>タイトルにセットする見出し</td>
</tr>
<tr>
<td align="center">fgcolor</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップボックスの内部の色</td>
</tr>
<tr>
<td align="center">bgcolor</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップボックスの枠線の色</td>
</tr>
<tr>
<td align="center">textcolor</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップボックス内部のテキストの色</td>
</tr>
<tr>
<td align="center">capcolor</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップボックスの見出しのテキストの色</td>
</tr>
<tr>
<td align="center">closecolor</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>closeテキストの色</td>
</tr>
<tr>
<td align="center">textfont</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>メインテキストで使用されるフォントの種類</td>
</tr>
<tr>
<td align="center">captionfont</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>見出しで使用されるフォント</td>
</tr>
<tr>
<td align="center">closefont</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>
<span class="quote">“<span class="quote">Close</span>”</span> テキストのフォント</td>
</tr>
<tr>
<td align="center">textsize</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>メインテキストのフォントサイズ</td>
</tr>
<tr>
<td align="center">captionsize</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>見出しテキストのフォントサイズ</td>
</tr>
<tr>
<td align="center">closesize</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>
<span class="quote">“<span class="quote">Close</span>”</span> テキストのフォントサイズ</td>
</tr>
<tr>
<td align="center">width</td>
<td align="center">integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ボックスの幅</td>
</tr>
<tr>
<td align="center">height</td>
<td align="center">integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ボックスの高さ</td>
</tr>
<tr>
<td align="center">left</td>
<td align="center">boolean</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em><code class="constant">FALSE</code></em></span></td>
<td>ポップアップをマウスの左側に表示</td>
</tr>
<tr>
<td align="center">right</td>
<td align="center">boolean</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em><code class="constant">FALSE</code></em></span></td>
<td>ポップアップをマウスの右側に表示</td>
</tr>
<tr>
<td align="center">center</td>
<td align="center">boolean</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em><code class="constant">FALSE</code></em></span></td>
<td>ポップアップをマウスの中央に表示</td>
</tr>
<tr>
<td align="center">above</td>
<td align="center">boolean</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em><code class="constant">FALSE</code></em></span></td>
<td>ポップアップをマウスの上側に表示
     (注: heightがセットされている場合のみ有効)</td>
</tr>
<tr>
<td align="center">below</td>
<td align="center">boolean</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em><code class="constant">FALSE</code></em></span></td>
<td>ポップアップをマウスの下側に表示</td>
</tr>
<tr>
<td align="center">border</td>
<td align="center">integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップの枠線の幅</td>
</tr>
<tr>
<td align="center">offsetx</td>
<td align="center">integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポインタから水平にどれくらい離れた位置にポップアップを表示するか</td>
</tr>
<tr>
<td align="center">offsety</td>
<td align="center">integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポインタから垂直にどれくらい離れた位置にポップアップを表示するか</td>
</tr>
<tr>
<td align="center">fgbackground</td>
<td align="center">url to image</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップの内部に色の代わりに表示する画像</td>
</tr>
<tr>
<td align="center">bgbackground</td>
<td align="center">url to image</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップの境界に色の代わりに表示する画像。 
     (注:bgcolor や colorを <span class="quote">“<span class="quote"></span>”</span> にしたほうがよい) 
     (注:Closeリンクを使用する場合、Netscape
     ではテーブルのセルが再描写されて誤った表示になることがあります)</td>
</tr>
<tr>
<td align="center">closetext</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>
<span class="quote">“<span class="quote">Close</span>”</span> テキストの代替として使用する文字列</td>
</tr>
<tr>
<td align="center">noclose</td>
<td align="center">boolean</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>sticky属性がtrueに設定されているポップアップの見出しに
     <span class="quote">“<span class="quote">Close</span>”</span> テキストを表示しない</td>
</tr>
<tr>
<td align="center">status</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ブラウザのステータスバーに表示する文字列</td>
</tr>
<tr>
<td align="center">autostatus</td>
<td align="center">boolean</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップのテキストをステータスバーのテキストとして設定する
      (注: statusの設定をオーバーライドします)</td>
</tr>
<tr>
<td align="center">autostatuscap</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップの見出しテキストをステータスバーのテキストとして設定する
      (注: statusとautostatusの設定をオーバーライドします)</td>
</tr>
<tr>
<td align="center">inarray</td>
<td align="center">integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>overlib.js 内にある ol_array 配列中の指定したインデックスから、
      text を読み込む (このパラメータはtextの代わりに使用されます)</td>
</tr>
<tr>
<td align="center">caparray</td>
<td align="center">integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>overlib.js 内にある ol_caps 配列中の指定したインデックスから、
      caption を読み込む</td>
</tr>
<tr>
<td align="center">capicon</td>
<td align="center">url</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップの見出しの前に画像を表示する</td>
</tr>
<tr>
<td align="center">snapx</td>
<td align="center">integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップを水平グリッドにスナップする</td>
</tr>
<tr>
<td align="center">snapy</td>
<td align="center">integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップを垂直グリッドにスナップする</td>
</tr>
<tr>
<td align="center">fixx</td>
<td align="center">integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップの水平の位置を固定する
      (注: 他の全ての水平の位置に関する属性はオーバーライドされます)</td>
</tr>
<tr>
<td align="center">fixy</td>
<td align="center">integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップの垂直の位置を固定する
      (注: 他の全ての垂直の位置に関する属性はオーバーライドされます)</td>
</tr>
<tr>
<td align="center">background</td>
<td align="center">url</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>テーブルボックスの背景の代わりに画像をセットする</td>
</tr>
<tr>
<td align="center">padx</td>
<td align="center">integer,integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>水平のホワイトスペースによって背景画像の表示領域を大きくする
      (注: ２つのパラメータが必要)</td>
</tr>
<tr>
<td align="center">pady</td>
<td align="center">integer,integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>垂直のホワイトスペースによって背景画像の表示領域を大きくする
      (注: ２つのパラメータが必要)</td>
</tr>
<tr>
<td align="center">fullhtml</td>
<td align="center">boolean</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>背景画像上でHTMLを完全にコントロールする (HTML コードは
      <span class="quote">“<span class="quote">text</span>”</span> 属性に記述する)</td>
</tr>
<tr>
<td align="center">frame</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>異なるフレームにおけるポップアップを操作する
      (詳細はoverlibのサイトを参照)</td>
</tr>
<tr>
<td align="center">function</td>
<td align="center">string</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>指定した Javascript 関数を呼び出し、
     その返り値をポップアップウィンドウに表示する</td>
</tr>
<tr>
<td align="center">delay</td>
<td align="center">integer</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップをツールチップ風に表示する。
      設定した遅延 (ミリ秒) の後にポップアップします。</td>
</tr>
<tr>
<td align="center">hauto</td>
<td align="center">boolean</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップがマウスの左側か右側のどちらに位置するべきかを自動的に決定する</td>
</tr>
<tr>
<td align="center">vauto</td>
<td align="center">boolean</td>
<td align="center">No</td>
<td align="center"><span class="emphasis"><em>n/a</em></span></td>
<td>ポップアップがマウスの上側か下側のどちらに位置するべきかを自動的に決定する</td>
</tr>
</tbody>
</table></div>
<div class="example">
<a name="id2804933"></a><p class="title"><b>Example 8.25. {popup}</b></p>
<div class="example-contents"><pre class="programlisting">

{* popup_initはページの先頭で一度だけ呼び出す必要があります *}
{popup_init src='/javascripts/overlib.js'}

{* マウスが重なった時にポップアップによる説明が表示されるリンクを作成します *}
&lt;a href="mypage.html" {popup text='This link takes you to my page!'}&gt;mypage&lt;/a&gt;

{* popupのtextにhtmlやlinksを用いる事ができます *}
&lt;a href="mypage.html" {popup sticky=true caption='mypage contents'
text="&lt;ul&gt;&lt;li&gt;links&lt;/li&gt;&lt;li&gt;pages&lt;/li&gt;&lt;li&gt;images&lt;/li&gt;&lt;/ul&gt;"
snapx=10 snapy=10 trigger='onClick'}&gt;mypage&lt;/a&gt;

{* テーブルのセルの上でポップアップします *}
&lt;tr&gt;&lt;td {popup caption='Part details' text=$part_long_description}&gt;{$part_number}&lt;/td&gt;&lt;/tr&gt;

  </pre></div>
</div>
<br class="example-break"><p>
 <a class="link" href="language.builtin.functions.html#language.function.capture" title="{capture}"><code class="varname">{capture}</code>
 </a> のページにもよい例があります。</p>
<p>
  <a class="link" href="language.function.popup.init.html" title="{popup_init}"><code class="varname">{popup_init}</code></a>
  および
  <a class="ulink" href="http://www.bosrup.com/web/overlib/" target="_top">overLib</a> のホームページも参照してください。
 </p>
</div>
<div class="navfooter">
<hr>
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="language.function.math.html">Prev</a> </td>
<td width="20%" align="center"><a accesskey="u" href="language.custom.functions.html">Up</a></td>
<td width="40%" align="right"> <a accesskey="n" href="language.function.popup.init.html">Next</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">{math} </td>
<td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td>
<td width="40%" align="right" valign="top"> {popup_init}</td>
</tr>
</table>
</div>
</body>
</html>
